<template>
	<view>
		<!-- 搜索框 -->
		<!-- <view class="flex p20 top">
			<image src="/static/img/index/search.png" mode="widthFix" class="search-icons"></image>
			<input type="text" placeholder="请输入要查找的信息" class="searchs" placeholder-style="
			font-size:26rpx;color:#666666;">
			<checkbox-group @change="allChoose">
				<label>
					<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox>
				</label>
			</checkbox-group>
			<text style="" class="f16 c6">全选/取消</text>
		</view>
		<view class="z40">

		</view>
		<view class="line"></view> -->
		<!-- 申请列表 -->
		<view class="">
			<checkbox-group class="block" @change="changeCheckbox">
				<view class="" v-for="(i,index) in list" :key="index">
					<view class="flexline" style="height: 200rpx;padding: 30rpx;box-sizing: border-box;">
						<image src="/static/img/index/header-blue.png" mode="widthFix" class="wid70 mr10"></image>
						<view class="f1 ">
							<view class="c35 f18 weight">
								{{ucompids}}
							</view>
							<view class="c35 f18">
								{{i.udepartmentid}} <text class="padding20"></text>  {{i.applyforjob}}
							</view>
							<view class="f16 c6">
								{{i.uname}}  <text class="padding20"></text>  {{i.autitele}}
							<!-- 	 <text class="f15 cf8" v-if="i.userid == userid "
									style="margin-left: 20rpx;">(本人)</text> -->
							</view>
						</view>
						<view class="" style="text-align: right;">
							<view class="c94 f15">
								{{i.date}}
							</view>
							<!-- <view>
								<label @click="getName(i.uname,i.udepartmentid,i.ucompid)">
									<checkbox class="boxs" :value="String(i.userid)"
										:checked="checkedArr.includes(String(i.userid))" />
								</label>
							</view> -->
						</view>
					</view>
					<view class="line"></view>
				</view>
			</checkbox-group>
			<view class="z70">

			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-hd">
					请你选择单聊还是群聊?
				</view>
				<view class="popup-db">
					<view :class="['popup-db-left',popupIndex== 1 ? 'red': '']" @click="getPop(1)">
						单聊
					</view>
					<view :class="['popup-db-right',popupIndex== 2 ? 'red': '']" @click="getPop(2)">
						群聊
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<view class="listpopup">
				<view class="listpopup-hd">
					请输入多发信息
				</view>
				<view class="listpopup-center">
					<view class="">
						<input type="text" placeholder="请输入" v-model="center">
					</view>
				</view>
				<view class="listpopup-db">
					<view class="" @click="getSha()">
						取消
					</view>
					<view class="" @click="getXiu()">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialogs" type="dialog">
			<view class="listpopup">
				<view class="listpopup-hd">
					请输入群名字
				</view>
				<view class="listpopup-center">
					<view class="">
						<input type="text" placeholder="请输入" v-model="quNmae">
					</view>
				</view>
				<view class="listpopup-db">
					<view class="" @click="getShas()">
						取消
					</view>
					<view class="" @click="getXius()">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <view class="di  main">
			<button class="btn  btn-big" @click="getQu()" hover-class="btn-hor">确认</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupIndex: null,
				list_url: '/pages_business/anpai/online/online',
				list: [],
				checkedArr: [],
				center: '',
				name: '',
				allChecked: false, //是否全选
				pm: '',
				arr: [],
				location:'',
				quNmae:'',
				userid:uni.getStorageSync('ID'),
				ucompids: uni.getStorageSync('company'),
			}
		},
		onLoad(id) {
			this.location = id.name
			console.log(id.name);
			this.getId(id.id)
		},
		methods: {
			getName(name, pm,ucompid) {
				// let arr = []
				console.log(name, pm);
				this.name = name
				this.arr.push(this.name)
				this.pm = pm
				this.ucompid = ucompid

			},
			getId(id) {
				this.request({
					url: '/chat/chakangChengYuan/1639083574755966976',
				}).then(res => {
					console.log(res);
					this.getList(res.data)
				})
			},
			getList(id) {
				this.request({
					url: '/chat/getEmployInfoByUserId?userid=' + id
				}).then(res => {
					console.log(res);
					this.list = res.data
				})
			},
			getXiu() {
				const uniqueSet = new Set(this.arr)
				const backToArray = [...uniqueSet]
				let obj;
				let arr = []
				for (let item in backToArray) {
					obj = {
						id: this.checkedArr[item],
						name: backToArray[item]
					}
					arr.push(obj)
				}
				arr.forEach(val => {
					console.log(val);
					let msg = {
						"code": "2",
						"message": {
							"toId": val.id,
							"name": uni.getStorageSync('name'),
							"avatar": "profile/2023/02/22/20230222105702A001.png",
							"type": 1,
							"fromId": uni.getStorageSync('ID'),
							"content": this.center,
							"second": 0,
							"taskId": "taskId",
							"second": "",
							"createTime": 0,
							"messageId": "1628231595821391872",
							"messageType": 0,
							"nameId": 1,
							"qunNmae": val.name,
							"dizhi":this.location,
						},
					}
					this.$ws.send(JSON.stringify(msg))
				})
				uni.redirectTo({
					url: '/pages_business/anpai/anpai'
				});
			},
			getXius(){ 
				console.log(this.location,this.quNmae,this.checkedArr,this.ucompid);
				this.request({
					url: '/chat/creatQun?weizhi='+ this.location+'&name='+ this.quNmae+'&ucompid='+this.ucompid,
					method: 'POST',
					data:this.checkedArr
				}).then(res => {
					console.log(res);
					// this.list = res.data
					if(res.code = 200 ){ 
						uni.redirectTo({
							url: '/pages_business/anpai/onlineQu/onlineQu?id='+res.msg +'&name='+this.quNmae+'&wz='+this.location
						})
					}else{ 
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
					
				})
			},
			getSha() {
				this.$refs.alertDialog.close()
				this.popupIndex = ''
				this.center = ''
			},
			getQu() {
				if (this.checkedArr.length >= 2) {
					this.$refs.popup.open('center')
				} else if (this.checkedArr.length == 1) {
					uni.redirectTo({
						url: '/pages_business/anpai/online/online?id=' + this.checkedArr + '&name=' +this.name +'&pm=' + this.pm+'&wz='+this.location
					})
				}
			},
			getPop(e) {
				this.popupIndex = e
				if (e == 1) {
					console.log(1);
					console.log(this.checkedArr, 666);
					this.$refs.alertDialog.open()
					this.$refs.popup.close()
					// uni.redirectTo({
					// 	url: '/pages_business/anpai/online/online'
					// })
				} else {
					this.$refs.alertDialogs.open()
					this.$refs.popup.close()
				
			}
		},
		changeCheckbox(e) {
			console.log(e);
			this.checkedArr = e.detail.value;
			// // 如果选择的数组中有值，并且长度等于列表的长度，就是全选
			if (this.checkedArr.length > 0 && this.checkedArr.length == this.list.length) {
				this.allChecked = true;
				// this.arr = []
			} else {
				this.allChecked = false;
				// this.arr = []
			}
		},
		allChoose(e) {
			let chooseItem = e.detail.value;
			// 全选
			console.log(chooseItem[0]);
			if (chooseItem[0] == 'all') {
				this.allChecked = true;

				for (let item of this.list) {
					// console.log(item);
					let itemVal = String(item.userid);
					if (!this.checkedArr.includes(itemVal)) {
						this.checkedArr.push(itemVal);
						this.arr.push(item.uname)
						console.log(this.arr);
					}
				}
			} else {
				// 取消全选
				this.allChecked = false;
				this.checkedArr = [];
				this.arr = []
			}
		}
	}
	}
</script>

<style lang="less">
	.listpopup {
		// width: 100px;
		// height: 100px;
		// padding: 50rpx 100rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.listpopup-hd {
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;
			// margin-bottom: 20rpx;
			padding-top: 10rpx;
		}

		.listpopup-center {
			padding: 15rpx 40rpx;

			view {
				border: 1rpx solid #ccc;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-top: 10rpx;
				color: #000;
				font-size: 30rpx;
			}
		}

		.listpopup-db {
			display: flex;
			border-top: 1rpx solid #ccc;

			view {
				width: 50%;
				padding: 20rpx 0;
				box-sizing: border-box;
				// border: 1rpx solid #ccc;
				text-align: center;
				font-size: 30rpx;

				&:nth-child(1) {
					border-right: 1rpx solid #ccc;
				}
			}
		}
	}

	.popup {
		background-color: #fff;
		// width: 80%;
		// padding-top: 20rpx ;
		border-radius: 10rpx;
		font-size: 35rpx;
		letter-spacing: 10rpx;

		.popup-hd {
			font-weight: 600;
			padding: 50rpx;
			border-bottom: 1rpx solid #ccc;
		}

		.popup-db {
			display: flex;
			justify-content: space-between;

			// text-align: center;
			.popup-db-left {
				width: 50%;
				text-align: center;
				border-right: 1rpx solid #ccc;
				padding: 20rpx;
			}

			.popup-db-right {
				width: 50%;
				text-align: center;
				// border-right: 1rpx solid #ccc;
				padding: 20rpx;
			}
		}

		.red {
			background-color: red;
			color: #fff;
		}
	}
</style>
